<template>
  <div class="content">
    <FilterTable
      ref="packageMaintenanceDLRbaseRules"
      :maxHeight="300"
      :columns="columns"
      :dataSource="dataSource"
      :isSelectColumn="packageType !== 'look'"
      :isColumnFilter="false"
      :isToperInfo="false"
      :columnsRef="$route.path + 'packageMaintenanceDLR-baseRules'"
      :onRowSelectChange="selectChange"
      :onCellChange="onCellChange"
      :onSyncTableData="onSyncTableData"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>
  </div>
</template>

<script>
import { state, mutations } from '../store';
import { dictionary } from '@/utils/dictMixin';
// import { getBrandAll, getSeriesAll, getModelAll } from '@/api-server/public/index';
import { addSave, getAllbrand, getAllseriess, getAllmodels, getAllpackage, getAlloption, getAllInterior, getAllexterior } from '@/api/omSale/vehicleParameters/vehicleMaterials/index.js';
import { getBrandAll ,getSeriesAll,getModelAll,uploadCarTem} from '@/api/repair/repairBusiness/repairPackage';


export default {
  name: 'baseRules',
  components: {},
  mixins: [dictionary],
  data() {
    return {
      repairTypeData: '', // 子页面需要的数据
      addWxgs: false, // 子页面弹框控制
      data: '',
      dataSource: [],
      columns: this.createTableColumns(),
      labourPriceInit: 18, // 工时单价
      selectedRows: [],
      disabledType: true,
      totalData: [], // 维修类型和账类下拉数据总和
      accountsLabourPriceList: [],
      showTypeList: false, // 账类说明
      jxxmEditItems: [], // 交修序号
      isDeleted: true, // 删除是否禁用
      orgList: [],
      isJxxm: false,
      brandList:[],
      seriesList: [],
      modelList: []
    };
  },
  computed: {
    packageType() {
      return state.packageType;
    },
    packageBaseRules() {
      return state.packageBaseRules;
    }
  },
  watch: {
    packageBaseRules(newVal) {
      console.log(newVal, 'packageBaseRules-watch');
      if (this.packageType !== 'add' && !this.dataSource.length) {
        this.baseTable.EXECUTE_INSERT(newVal);
      }
    }
  },
  created() {

    this.initData();
    // this.getLabourPrice();
    // this.getOrgsTree();
  },
  mounted(){
    this.baseTable = this.$refs.packageMaintenanceDLRbaseRules.$refs.pageTable;
  },
  beforeDestroy() {},
  methods: {



    async initData() {
      const getBrandList = await getBrandAll(),
            getSeriesList =  await getSeriesAll(),
            getModelList =  await getModelAll();
      this.brandList = getBrandList.data.map(x => ({ text: x.brandName, value: x.brandCode }));
      this.seriesList = getSeriesList.data.map(x => ({ text: x.seriesName, value: x.seriesCode,brandCode: x.brandCode  }));
      this.modelList = getModelList.data.map(x => ({ text: x.modelName, value: x.modelCode, seriesCode: x.seriesCode }));

    },

    setSeriesList(brand) {
      // console.log(this.seriesList,"车系11",this.seriesList.filter(x => x.brandCode === brand))
         return this.seriesList.filter(x => x.brandCode === brand);
    },
     setModelList(series) {
          // console.log(this.modelList,"车型")
         return this.modelList.filter(x => x.seriesCode === series);

    },
    onCellChange(change, row) {
      console.log('onCellChange-----');
      console.log(row, 'onCellChange');
      const str = Object.keys(change)[0];
      const name = str.substring(str.indexOf('|') + 1);


      this.dataSource = [...this.dataSource];
      mutations.setPackageBaseRules(this.dataSource);
    },
    // 同步表格数据
    onSyncTableData(val) {
      console.log(val, 'onSyncTableData------');
      if (this.packageType === 'look') {
        for (const i of val) {
          this.baseTable.SET_CELL_DISABLED(i, 'vcCode', true);
        }
        return;
      }
      mutations.setPackageBaseRules(val);

    },
    deleteClick() {
      if (!this.selectedRows.length) {
        this.$notify.warning({ title: '提示信息', message: '请选择要删除的数据！' });
        return;
      }

      this.baseTable.EXECUTE_DELETE(this.selectedRows);
      this.dataSource = [...this.dataSource];
    },
    selectChange(rows) {
      console.log('selectChange-----');
      this.selectedRows = rows;
    },
    createUidKey(key = '') {
      // 创建UID
      if (key !== '') {
        key += '-';
      }
      const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
        const r = (Math.random() * 16) | 0;
        const v = c === 'x' ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
      return key + uuid;
    },
    add() {
      // this.dataSource.push({ model: '', series: '', brand: '', rowKey: 'A', uuid: this.createUidKey() });
      // let obj = JSON.parse(JSON.stringify(this.dataSource));
      // obj.push({ model: '', series: '', brand: '', rowKey: 'A', uuid: this.createUidKey() })
      // this.dataSource = JSON.parse(JSON.stringify(obj))
      this.baseTable.EXECUTE_INSERT({ model: '', series: '', brand: '', rowKey: 'A', uuid: this.createUidKey() });
      // this.$nextTick(()=>{
      //    this.dataSource = [...this.dataSource];
      // })
      // this.dataSource = [...this.dataSource];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '品牌',
          dataIndex: 'brand',
          initialValue:'',
          render: params => {
            if (!params.row.brand) {
              params.row.series = '';
              params.row.model = '';
            }
            return (
              <el-select
                value={params.row.brand}
                disabled={this.packageType === 'look'}
                onChange={e => {
                  params.row.brand = e;
                  params.row.series = '';
                  params.row.model = '';
                }}
                clearable
              >
                {this.brandList.map(item => {
                  return <el-option key={item.value} label={item.text} value={item.value}></el-option>;
                })}
              </el-select>
            );
          }
        },
        {
          title: '车系',
          dataIndex: 'series',
          render: params => {
            const list = params.row.brand ? this.setSeriesList(params.row.brand, params.row) : [];
            console.log('params.row.brand',params.row.brand)
            return (
              <el-select
                disabled={this.packageType === 'look'}
                value={params.row.series}
                onChange={e => {
                  params.row.series = e;
                  params.row.model = '';
                }}
                clearable
              >
                {list.map(item => {
                  return <el-option key={item.value} label={item.text} value={item.value}></el-option>;
                })}
              </el-select>
            );
          }
        },
        {
          title: '车型',
          dataIndex: 'model',
          render: params => {
            const list = params.row.series ? this.setModelList(params.row.series) : [];
                        console.log('params.row.series',params.row.series,list)

            return (
              <el-select
                disabled={this.packageType === 'look'}
                value={params.row.model}
                onChange={e => {
                  params.row.model = e;
                }}
                clearable
              >
                {list.map(item => {
                  return <el-option key={item.value} label={item.text} value={item.value}></el-option>;
                })}
              </el-select>
            );
          }
        }

      ];
    }
  }
};
</script>

<style lang="less" scoped>
.searchBtn {
  border-radius: 0px;
}
</style>
